<template>
  <div class="m-comment">
    <ul class="com-wrapper clear-float">
      <li class="item0"></li>
      <li class="item1">好评度</li>
      <li class="item2">95%</li>
      <li class="item4"></li>
      <li class="item3">5112条评论</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'm-comment',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-comment{
    width: 100%;
    height: 0.9rem;
    padding:0.3rem 0.3rem 0.2rem;
    margin-bottom: 0.28rem;
    background-color: #FFF;
    border-bottom: 1px solid #D7D7D7;
    border-top: 1px solid #D7D7D7;
  }
  ul{
    width: 100%;
    height: 0.4rem;
  }
  /*.clear-float:after{*/
    /*display: block;*/
    /*content: '';*/
    /*clear: both;*/
  /*}*/
  .item0{
    width: 0.28rem;
    height: 0.28rem;
    float: left;
    margin-right: 0.1rem;
  }
  .item1{
    float: left;
    margin-right: 0.1rem;
    color:#333;
    font-size: 0.28rem;
  }
  .item2{
    float: left;
    color:#FF6633;
    font-size: 0.28rem;
  }
  .item3{
    float: right;
    margin-right: 0.1rem;
    color:#999;
    font-size: 0.24rem;
  }
  .item1,.item2,.item3{
    margin-top: -0.04rem;
  }
  .item4{
    float: right;
    width: 0.16rem;
    height: 0.26rem;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 1),
  only screen and (min--moz-device-pixel-ratio: 1),
  only screen and (-o-min-device-pixel-ratio: 1/1),
  only screen and (min-device-pixel-ratio: 1){
    .item0{
      background-image: url("../../assets/image/up.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .item4{
      background-image: url("../../assets/image/rightarraw.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5){
    .item0{
      background-image: url("../../assets/image/up@2x.png");
      background-size: contain;
      background-repeat: no-repeat;

    }
    .item4{
      background-image: url("../../assets/image/rightarraw@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2){
    .item0{
      background-image: url("../../assets/image/up@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .item4{
      background-image: url("../../assets/image/rightarraw@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
</style>
